<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>观测数据</title>
    <link rel="stylesheet" href="${contextPath}/css/ElementCss/theme/index.css">
    <link rel="stylesheet" href="${contextPath}/css/home.css"/>

    <style>
        /*
                .topSelectRight{
                    display: none;
                }
        */
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>


<div class="all gray">

    <div class="ResultTop">
        <!-- 上面是统计图 -->
        <div class="topSelect">
            <div class="topSelectHead"></div>
            <div id="eChartsDiv" class="eChartsDiv">
            </div>
        </div>
    </div>

    <div id="main">
        <%--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓浮标数据-水质等级监控↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓--%>
        <div class="topSelectZindexleft">
            <div class="topSelectHead" v-cloak>
                <div class="divIcon"></div>
                <span class="topSelectHeadSpan">{{$t('homeResultData.Water_quality')}} </span>
                <el-select class="topselectLeft" style="margin-top: 20px" v-model="echarttype" @change="loadDate(1)">
                    <el-option v-for="item in echarttypeoptions" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </div>
        </div>
        <div class="topSelectZindex">
            <el-button @click="upload()" type="button" style="margin-top: 20px;margin-right: 5px"
                       class="el-button--primary el-button--small el-button--small.is-round">
                <span>上传
                <i class="el-icon-upload el-icon--right"></i></span>
            </el-button>
            <select-property-hide @send-property-hide-first="siteTypeOptionValue=$event"
                                  @send-property-hide="siteTypeOptionValue=$event"
                                  class="topSelectRight"></select-property-hide>
            <el-select class="topSelectRight" v-model="selectedsiteValue" multiple collapse-tags placeholder="请选择"
                       @change="loadDate()">
                <el-option
                        v-for="item in siteValue"
                        :key="item.id"
                        :label="item.siteName"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-date-picker class="topSelectRight"
                            v-model="dateValue"
                            type="daterange"
                            range-separator="-"
                            :start-placeholder="$t('homeResultData.begtime')"
                            :end-placeholder="$t('homeResultData.endtime')">
            </el-date-picker>
        </div>
        <el-dialog :title="$t('homeResultData.Fix')" :visible.sync="updateData" width="30%"
                   :modal-append-to-body='false'>
            <el-form :model="formUpdate" label-width="80px">

                <el-form-item :label="$t('homeResultData.Attributes')">
                    <el-input :disabled="true" v-model="formUpdate.dataNameCh"></el-input>
                </el-form-item>
                <el-form-item :label="$t('homeResultData.time')">
                    <el-input :disabled="true" v-model="formUpdate.dateFormatTime"></el-input>
                </el-form-item>
                <el-form-item :label="$t('homeResultData.value')">
                    <el-input v-model="formUpdate.dataRemark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateData = false">{{$t('homeResultData.cancel')}}</el-button>
                <el-button type="primary" @click="submitUpdata()">{{$t('homeResultData.sure')}}</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="上传" :visible.sync="uploadtab" width="30%" :modal-append-to-body='false'>
            <el-form :model="formUpload" label-width="80px">
                <select-site-sql @send-property-hide-first="siteOptionValue=$event"
                                 @send-property-hide="siteOptionValue=$event"
                                 style="margin-right: 10px;margin-top: 20px;"></select-site-sql>
                <el-upload style="margin-top: 20px;margin-right: 5px"
                           class="upload-demo"
                           action="../hardware/upload.do"
                           :on-success="uploadSuccess"
                           :drag="false" :multiple="true" :show-file-list="false" name="fileUpload">
                    <el-button size="small" type="primary"> {{$t('homeMonitoring.Upload')}} <i
                            class="el-icon-upload el-icon--right"></i></el-button>
                </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="uploadtab = false">{{$t('homeResultData.cancel')}}</el-button>
                <el-button type="primary" @click="submitUpload()">{{$t('homeResultData.sure')}}</el-button>
            </div>
        </el-dialog>
        <%--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓浮标数据-数据↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓--%>
        <div class="ResultButtom" v-cloak>
            <!-- 下面依然是表格 -->
            <div class="topSelect hightAout">
                <div class="topSelectHead">
                    <div class="divIcon"></div>
                    <span class="topSelectHeadSpan">{{$t('homeResultData.data')}}</span>
                </div>
                <div class="eChartsDiv" style="height: auto">
                    <el-table :data="tableData" stripe style="width: 100%"
                              v-loading.fullscreen.lock="fullscreenLoading">
                        <el-table-column type="index" :label="$t('homeResultData.number')" width="140">
                        </el-table-column>
                        <el-table-column prop="sitename" label="站点">
                        </el-table-column>
                        <el-table-column prop="dataNameEn" :label="$t('homeResultData.Attributes')">
                        </el-table-column>
                        <el-table-column :formatter="common.dateFormatTime" prop="dataTime"
                                         :label="$t('homeResultData.time')">
                        </el-table-column>
                        <el-table-column prop="dataValue" :label="$t('homeResultData.value')">
                        </el-table-column>
                    </el-table>
                    <div class="rightTableFoot">
                        <el-pagination background layout="prev, pager, next" :total="pageCount"
                                       @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="${contextPath}/js/echarts.min.js"></script> <!-- 统计图 -->
<script src="${contextPath}/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/elementIndex.js"></script>
<script src="${contextPath}/js/vueApp.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/vue-resource.js"></script>

<script src="${contextPath}/js/language/languages.js" type="text/javascript" charset="utf-8"></script>

<%--公共方法--%>
<script src="${contextPath}/js/homeJS/publicTool.js"></script>
<%--组件 得在实例化前面--%>
<script src="${contextPath}/js/homeJS/component.js"></script>

<%--语言js--%>
<script src="${contextPath}/js/language/vue-i18n.js"></script>

<script src="${contextPath}/js/homeJS/homeHardWare.js"></script>
</html>
